<template>
  <div>
    <div class="Header">
      <section>
        <aside class="left">
          <img src="../../assets/img/logo_03.png" class="leftLogo" />
          <ul>
            <router-link tag="li" to="/about">
              <a>
                <el-menu
                  mode="horizontal"
                  background-color="#191e29"
                  text-color="#777"
                  active-text-color="#fff"
                >
                  <el-submenu index="2">
                    <template slot="title">课程</template>
                    <el-menu-item  index="2-1">全部课程</el-menu-item>
                    <el-menu-item  index="2-2">即将上线</el-menu-item>
                    <el-menu-item  index="2-3">开发者</el-menu-item>
                  </el-submenu>
                </el-menu>
              </a>
            </router-link>
            <router-link tag="li" to="/about">
              <a>路径</a>
            </router-link>
            <router-link tag="li" to="/about">
              <a>讨论区</a>
            </router-link>
            <router-link tag="li" to="/about">
              <a>训练营</a>
            </router-link>
            <router-link tag="li" to="/about">
              <a>会员</a>
            </router-link>
          </ul>
        </aside>
        <aside class="right">
          <div>
            <input value placeholder="搜索 课程/问答" />
          </div>
          <button>登录</button>
          <button>注册</button>
        </aside>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      activeIndex2: "1"
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script >



<style scoped>
.Header {
  height: 50px;
  background-color: #191e29;
}
.el-menu--horizontal > .el-submenu /deep/ .el-submenu__title {
  height: 50px;
  line-height: 50px;
}
.Header section {
  width: 1200px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.Header section .left {
  flex: 1;
  display: flex;
}

.left .leftLogo {
  height: 50px;
}
.Header section .left ul {
  display: flex;
  font-size: 14px;
}

.left ul li {
  width: 70px;
  height: 50px;
  text-align: center;
}
.left ul li a {
  color: #777;
  line-height: 50px;
}
.left ul li a:hover {
  color: white;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.Header section .right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.Header section .right div {
  height: 35px;
  width: 180px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.Header section .right div input {
  border: 0;
  padding: 0 10px;
}
.Header section .right button {
  width: 55px;
  height: 35px;
  background-color: #191e29;
  border: 1px solid hsla(0, 0%, 100%, 0.5);
  color: hsla(0, 0%, 100%, 0.5);
  border-radius: 5px;
  margin-right: 5px;
}
.Header section .right button:last-child {
  background-color: #11aa8c;
  border: 1px solid #11aa8c;
  color: #fff;
}
</style>
